<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>参数列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <!-- 头部警告 -->
      <el-alert title="注意：只允许为第三级分类设置参数" show-icon type="warning"> </el-alert>
      <!-- el row  col -->
      <el-row class="cat_opt">
        <el-col>
          <span>选择商品：</span>
          <!-- 级联选择器 -->

          <!-- options    数据源   咱们获取的-所有商品的分类   catlist  在data中保存-->
          <!-- :props 级联选择器的一系列属性 
                v-model 咱们选中的id  对应是   value: 'cat_id',  （点击了哪一个，获取到保存在数组中）
          -->
          <el-cascader v-model="selectCaKes" :options="catlist" :props="catprops" @change="handleChange"> </el-cascader>
        </el-col>
      </el-row>
      <!-- tabs  -->
      <el-tabs v-model="activeName" @tab-click="handleTablClick">
        <el-tab-pane label="动态参数" name="many">
          <el-button size="mini" type="primary" :disabled="isBtnisbled" @click="addDialogVisble = true"> 添加参数 </el-button>
          <el-table :data="manyTabData" border stripe="">
            <!-- 展开行 -->
            <el-table-column type="expand"></el-table-column>
            <!-- 索引类 -->
            <el-table-column type="index"></el-table-column>
            <el-table-column label="参数名称" prop="attr_name"></el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="showedDialog"> 编辑 </el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini"> 删除 </el-button>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="静态属性" name="only">
          <el-button size="mini" type="primary" :disabled="isBtnisbled" @click="addDialogVisble = true"> 添加属性 </el-button>
          <el-table :data="onlyTabData" border stripe="">
            <!-- 展开行 -->
            <el-table-column type="expand"></el-table-column>
            <!-- 索引类 -->
            <el-table-column type="index"></el-table-column>
            <el-table-column label="参数名称" prop="attr_name"></el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="showedDialog"> 编辑 </el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini"> 删除 </el-button>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 添加参数对话框 
      :before-close="handleClose"-->
    <el-dialog :title="'添加' + textxxx" :visible.sync="addDialogVisble" width="50%" @close="addDilogClose">
      <!-- 表单 -->
      <el-form :model="addFrom" :rules="addFromRules" ref="addFromRef" label-width="100px">
        <el-form-item :label="textxxx" prop="attr_name">
          <el-input v-model="addFrom.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisble = false">取 消</el-button>
        <el-button type="primary" @click="addParams"> 确 定 </el-button>
      </span>
    </el-dialog>
    <!-- 修改的对话框 -->
    <el-dialog :title="'修改' + textxxx" :visible.sync="editDialogVisble" width="50%" @close="editDilogClose">
      <!-- 表单 -->
      <el-form :model="editFrom" :rules="editFromRules" ref="editFromRef" label-width="100px">
        <el-form-item :label="textxxx" prop="attr_name">
          <el-input v-model="editFrom.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisble = false">取 消</el-button>
        <el-button type="primary" @click="editParams"> 确 定 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        addFrom: {},
        addFromRules: {
          attr_name: [{ required: true, message: '请输入参数名称', trigger: 'blur' }]
        },
        // 所有商品分类数据
        catlist: [],
        // 级联选择器的一系列属性
        catprops: {
          expandTrigger: 'hover',
          value: 'cat_id',
          label: 'cat_name',
          children: 'children'
        },
        // 选中每个项的id 保存在这
        selectCaKes: [],
        // tabs 标签默认显示的
        activeName: 'many',
        manyTabData: [],
        onlyTabData: [],
        addDialogVisble: false,
        editDialogVisble: false,
        editFrom: {},
        editFromRules: {
          attr_name: [{ required: true, message: '请输入参数名称', trigger: 'blur' }]
        }
      }
    },
    // vue实例中的data、method已被初始化，属性也被绑定，但是此时还是虚拟dom
    created() {
      this.getCateList() // 所有商品分类的列表
    },
    // 方法
    methods: {
      async getCateList() {
        // 所有(不是分页)-商品分类的列表
        const { data: res } = await this.$http.get('categories')
        if (res.meta.status !== 200) {
          // //如果失败 if  里面return 出去   虚拟dom开始加载数据
          return this.$message.error('获取商品分类失败')
        } //成功后把数据给到 catlist data  定义的  把最里面的每个数组，给到自己定义的数据名称
        this.catlist = res.data
        //(this.catlist)
      },

      handleChange() {
        this.getParamsData()
      },

      // Tab 点击事件
      handleTablClick() {
        this.getParamsData()
      },

      async getParamsData() {
        if (this.selectCaKes.length !== 3) {
          this.selectCaKes = []
          return
        }
        this.selectCaKes
        const { data: res } = await this.$http.get(`categories/${this.cateid}/attributes`, { params: { sel: this.activeName } })

        if (res.meta.status !== 200) {
          return this.$message.error('添加分类失败')
        }
        res.data
        if (this.activeName === 'many') {
          this.manyTabData = res.data
        } else {
          this.onlyTabData = res.data
        }
      },
      addDilogClose() {
        this.$refs.addFromRef.resetFields()
      },
      // 点击添加
      addParams() {
        // 添加的时候，做个预验证
        this.$refs.addFromRef.validate(async (valid) => {
          if (!valid) return
          const { data: res } = await this.$http.post(`categories/${this.cateid}/attributes`, {
            attr_name: this.addFrom.attr_name,
            attr_sel: this.activeName
          })
          if (res.meta.status !== 201) {
            return this.$message.error('添加参数失败')
          }
          this.$message.success('添加参数成功')
          this.addDialogVisble = false
          this.getParamsData()
        })
      },
      // 按钮-修改
      showedDialog() {
        this.editDialogVisble = true
      },
      editDilogClose() {
        this.$refs.editFromRef.resetFields()
      },
      editParams() {}
    },
    // 计算属性
    computed: {
      isBtnisbled() {
        if (this.selectCaKes.length !== 3) {
          return true
        }
        return false
      },
      // 选中三级分类的id
      cateid() {
        if (this.selectCaKes.length === 3) {
          return this.selectCaKes[2]
        }
        return null
      },
      textxxx() {
        if (this.activeName === 'many') {
          return '动态属性'
        }
        return '静态属性'
      }
    }
    //计算标题文本
  }
</script>

<style lang="less" scoped>
  .cat_opt {
    margin-top: 20px;
  }
</style>
